<template>
  <ele-card header="官网底部地图">
    <div ref="locationMapRef" style="height: 360px; max-width: 800px"></div>
  </ele-card>
</template>

<script setup>
import { MAP_KEY } from '@/config/setting'
import { useThemeStore } from '@/store/modules/theme'
import AMapLoader from '@amap/amap-jsapi-loader'
import { storeToRefs } from 'pinia'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'

/** 是否是暗黑主题 */
const themeStore = useThemeStore()
const { darkMode } = storeToRefs(themeStore)

/** 地图容器 */
const locationMapRef = ref(null)

/** 官网底部地图的实例 */
let mapInsLocation

/** 渲染官网底部地图 */
function renderLocationMap() {
  AMapLoader.load({
    key: MAP_KEY,
    version: '2.0',
    plugins: ['AMap.InfoWindow', 'AMap.Marker'],
  })
    .then((AMap) => {
      // 渲染地图
      const option = {
        zoom: 13, // 初缩放级别
        center: [114.346084, 30.511215 + 0.005], // 初始中心点
        mapStyle: darkMode.value ? 'amap://styles/dark' : void 0,
      }
      mapInsLocation = new AMap.Map(locationMapRef.value, option)
      // 创建信息窗体
      const infoWindow = new AMap.InfoWindow({
        content: `
            <div style="color: #333;">
              <div style="padding: 5px;font-size: 16px;">广州科技有限公司</div>
              <div style="padding: 0 5px;">地址: 广东省广州市高新技术开发区</div>
              <div style="padding: 0 5px;">电话: 020-123456789</div>
            </div>
            <a
              style="padding: 8px 0 0 5px;text-decoration: none;display: inline-block;color: #1677ff;"
              href="//uri.amap.com/marker?position=114.346084,30.511215&name=广州科技有限公司"
              target="_blank">到这里去→
            </a>
          `,
      })
      infoWindow.open(mapInsLocation, [114.346084, 30.511215])
      const icon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image:
            '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
        imageSize: new AMap.Size(25, 34),
      })
      const marker = new AMap.Marker({
        icon,
        position: [114.346084, 30.511215],
        offset: new AMap.Pixel(-12, -28),
      })
      marker.setMap(mapInsLocation)
      marker.on('click', () => {
        infoWindow.open(mapInsLocation)
      })
    })
    .catch((e) => {
      console.error(e)
    })
}

/** 渲染地图 */
onMounted(() => {
  renderLocationMap()
})

/** 销毁地图 */
onBeforeUnmount(() => {
  if (mapInsLocation) {
    mapInsLocation.destroy()
    mapInsLocation = null
  }
})

/** 同步框架暗黑模式切换 */
watch(darkMode, (value) => {
  if (mapInsLocation) {
    if (value) {
      mapInsLocation.setMapStyle('amap://styles/dark')
    }
    else {
      mapInsLocation.setMapStyle('amap://styles/normal')
    }
  }
})
</script>
